import React, { useEffect } from "react";
import * as echarts from 'echarts';

interface IData {
    linelist: any[];
    id: string;
}

const ChatLine: React.FC<IData> = ({
    linelist,
    id
}): React.ReactElement => {

    let initChart = () => {
        let element = document.getElementById(id);
        let myChart = echarts.init(element as HTMLDivElement);
        let option: any = {
            title: {
                text: '12月销售额',
            },
            xAxis: {
                type: 'category',
                data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
            },
            yAxis: {
                type: 'value'
            },
            series: [
                {
                    data: linelist,
                    type: 'bar',
                    showBackground: true,
                    backgroundStyle: {
                        color: 'rgba(180, 180, 180, 0.2)'
                    }
                }
            ]
        };
        myChart.setOption(option);
    };

    useEffect(() => {
        initChart();
    });

    return (
        <div className="ChatPic">
            <div id={id} style={{ width: '100%', height: 400 }} />
        </div>
    )
}
export default ChatLine;